<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站雏形</title>
    <link rel="stylesheet" href="./4.style2.css" type="text/css">
    <link rel="stylesheet" href="./3.reset.css" type="text/css">
    <style>
        .footer{
            width: 100%;
            background: rgb(212,212,212);
        }
        .footer1{
            width: 1000px;
            height: 223px;
            margin: 0 auto;
            /*background: rgb(212,212,212);*/
        }
            .footer1>div>a{
                font-family: 新宋体;
                font-size: 12px;
            }
        .联系我们{
            padding-top: 45px;
            margin-top: 45px;
            text-align: center;
        }
        .备案{
            text-align: center;
        }
        /*.底部认证>span>img{*/
        /*    width: 1000px;*/
        /*    height: 42px;*/
        /*    background: #F56600;*/
        /*    text-align: center;*/
        /*}*/
        .底部认证{
            text-align: center;
            margin-right: 15px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="top">
                <img class="星星 left" src="./images/star.jpg" alt="收藏星星">
                <a href="#">收藏猿代码</a>
            <div class="welcome right">
                欢迎来到猿代码！
                <a href="#">[登录]</a>
                <a href="#">[免费注册]</a>
            </div>
        </div>
        <div class="logobar">
                <div class="logo">
                        <img class="left" src="./images/logo.png" alt="logo猴">
                        <input class="space left" type="text" name="" id="">
                        <input class=" search left" type="submit" value="搜索">
                    <div class="shopcar right">
                        <div class="shopcar1 left">
                             <img class="购物车 left" src="./images/shopcar.jpg" alt="购物车" width="23px" height="20px">
                            <a class="购物车字体" href="#">&nbsp购物车</a>
                        </div>
                        <div class="shopcar2 right">
                            <a class="零数字"href="#">0</a>
                            <img class="right" src="./images/icon.jpg" alt="三角" width="12px" height="12px">
                        </div>
                    </div>
                </div>
        </div>
        <div class="navbar">
            <div class="nav">
                <ul class="nav1 left">
                    <li class="商品分类">
                        全部商品分类
                     <img src="./images/sanjiao.png" alt="下拉箭头">
                    </li>
                    <li class="数码城">数码城</li>
                    <li>天黑黑</li>
                    <li>团购</li>
                    <li>发现</li>
                    <li>二手特卖</li>
                    <li>名品会</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="banner1 left">
            <ul >
                <li >
                    <ul class="banner2">
                        <li class="banner10">
                            <a>手机</a>
                            <a>数码</a>
                            <a class="合约机">合约机</a>
                        </li>
                        <li class="banner100">
                            <a>荣耀X</a>
                            <a>单反</a>
                            <a>智能设备</a>
                        </li>
                    </ul>
                    <ul class="banner3 right">
                        <li>
                            <img  class="展示三角" src="./images/showclass-jiantou.png" alt="展示三角">
                        </li>
                    </ul>
                </li>
                <li><!--第2个-->
                    <ul class="banner2">
                        <li class="banner10">
                            <a>电脑</a>
                            <a>硬件外设</a>
                            <a >装机宝</a>
                        </li>
                        <li class="banner100">
                            <a>笔记本</a>
                            <a>台式机</a>
                            <a>超极本</a>
                            <a>平板</a>
                        </li>
                    </ul>
                    <ul class="banner3 right">
                        <li>
                            <img  class="展示三角" src="./images/showclass-jiantou.png" alt="展示三角">
                        </li>
                    </ul>
                </li>
                <li><!--第3个-->
                    <ul class="banner2">
                        <li class="banner10">
                            <a>大家电</a>
                        </li>
                        <li class="banner100">
                            <a>电视</a>
                            <a>空调</a>
                            <a>冰箱</a>
                            <a>洗衣机</a>
                        </li>
                    </ul>
                    <ul class="banner3 right">
                        <li>
                            <img  class="展示三角" src="./images/showclass-jiantou.png" alt="展示三角">
                        </li>
                    </ul>
                </li>
                <li><!--第4个-->
                    <ul class="banner2">
                        <li class="banner10">
                            <a>厨房电器</a>
                            <a>生活电器</a>
                        </li>
                        <li class="banner100">
                            <a>空气净化器</a>
                            <a>微波炉</a>
                            <a>取暖设备</a>
                        </li>
                    </ul>
                    <ul class="banner3 right">
                        <li>
                            <img  class="展示三角" src="./images/showclass-jiantou.png" alt="展示三角">
                        </li>
                    </ul>
                </li>
                <li><!--第5个-->
                    <ul class="banner2">
                        <li class="banner10">
                            <a>厨房电器</a>
                            <a>生活电器</a>
                        </li>
                        <li class="banner100">
                            <a>空气净化器</a>
                            <a>微波炉</a>
                            <a>取暖设备</a>
                        </li>
                    </ul>
                    <ul class="banner3 right">
                        <li>
                            <img  class="展示三角" src="./images/showclass-jiantou.png" alt="展示三角">
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="background-show">
        <img src="./images/banner01.jpg" alt="背景广告">
        </div>
    </div>
    <div class="product1">
        <div class="product10">
            <img class="left" src="./images/product-icon1.png" alt="生产logo标">
            <a class="product11">家用电器</a>
            <a class="product12 right">更多>></a>
        </div>
        <div class="list">
            <div class="picture1 left">
                <img  src="./images/product-banner01.jpg" alt="广告图片1">
            </div>
            <div class="pictureline right">
                <div class="picture left"><img src="./images/HTC.jpg" alt="三星手机"> </div>
                <div class="picture left"><img src="./images/HTC.jpg" alt="三星手机"></div>
                <div class="picture left"><img src="./images/HTC.jpg" alt="三星手机"></div>
                <div class="picture left"><img src="./images/HTC.jpg" alt="三星手机"></div>
            </div>
            <div class="字体">
                <div class="picturedescipt">
                    <ul>
                        <li class="kewang">HTC新渴望8系列</li>
                        <li class="money">1899元</li>
                    </ul>
                </div>
                <div class="picturedescipt">
                    <ul>
                        <li class="kewang">HTC新渴望8系列</li>
                        <li class="money">2888元</li>
                    </ul>
                </div>
                <div class="picturedescipt">
                    <ul>
                        <li class="kewang">HTC新渴望8系列</li>
                        <li class="money">2899元</li>
                    </ul>
                </div>
                <div class="picturedescipt">
                    <ul>
                        <li class="kewang">HTC新渴望8系列</li>
                        <li class="money">2888元</li>
                    </ul>
                </div>
            </div>
            <div class="list-bottom ">
                <div class="smallpicturepart">
                    <img class="smallpicture left" src="./images/三星手机.png" alt="三星手机">
                    <ul>
                        <li class="miaoshu left" style="color: #FF7403">NFC技术一碰轻松配对！接触屏幕</li>
                        <li class="jine left">￥149.00</li>
                    </ul>
                </div>
                <div class="smallpicturepart">
                    <img class="smallpicture left" src="./images/三星手机.png" alt="三星手机">
                    <ul>
                        <li class="miaoshu left" >Samsung三星G ALAXY Grand2</li>
                        <li class="jine left">￥2000.00</li>
                    </ul>
                </div>
                <div class="smallpicturepart">
                    <img class="smallpicture left" src="images/4.ipad.png" alt="苹果ipad">
                    <ul>
                        <li class="miaoshu left" >全网低价 Apple 苹果ipad mini1</li>
                        <li class="jine left">￥1888.00</li>
                    </ul>
                </div>
                <div class="smallpicturepart">
                    <img class="smallpicture left" id="applescreen" src="./images/apple屏幕.png" alt="三星手机">
                    <ul>
                        <li class="miaoshu left" >Apple苹果 全新 Retina屏MacBoo</li>
                        <li class="jine left">￥20020.00</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="product2">
        <div class="product10">
            <img class="left" src="./images/product-icon.jpg" alt="生产logo标">
            <a class="product11">食品酒水</a>
            <a class="product12 right">更多>></a>
        </div>
        <div class="list">
            <div class="picture1 left">
                <img  src="./images/广告p.png" alt="广告图片1">
            </div>
            <div class="pictureline right">
                <div class="picture left"><img src="./images/食品p.png" alt="食品大图"> </div>
                <div class="picture left"><img src="./images/食品p.png" alt="食品大图"></div>
                <div class="picture left"><img src="./images/食品p.png" alt="食品大图"></div>
                <div class="picture left"><img src="./images/食品p.png" alt="食品大图"></div>
            </div>
            <div class="字体">
                <div class="picturedescipt">
                    <ul>
                        <li class="kewang">三月美食狂享购</li>
                        <li class="money">50元</li>
                    </ul>
                </div>
                <div class="picturedescipt">
                    <ul>
                        <li class="kewang">三月美食狂享购</li>
                        <li class="money">40元</li>
                    </ul>
                </div>
                <div class="picturedescipt">
                    <ul>
                        <li class="kewang">三月美食狂享购</li>
                        <li class="money">20元</li>
                    </ul>
                </div>
                <div class="picturedescipt">
                    <ul>
                        <li class="kewang">三月美食狂享购</li>
                        <li class="money">80元</li>
                    </ul>
                </div>
            </div>
            <div class="list-bottom ">
                <div class="smallpicturepart">
                    <img class="smallpicture left" src="./images/康比特p.png" alt="康比特小图">
                    <ul>
                        <li class="miaoshu left" >康比特 维他保咀嚼片 60片</li>
                        <li class="jine left">￥600.00</li>
                    </ul>
                </div>
                <div class="smallpicturepart">
                    <img class="smallpicture left" src="./images/康比特p.png" alt="康比特小图">
                    <ul>
                        <li class="miaoshu left" >康比特 维他保咀嚼片 60片</li>
                        <li class="jine left">￥400.00</li>
                    </ul>
                </div>
                <div class="smallpicturepart">
                    <img class="smallpicture left" src="./images/康比特p.png" alt="康比特小图">
                    <ul>
                        <li class="miaoshu left" >康比特 维他保咀嚼片 60片</li>
                        <li class="jine left">￥200.00</li>
                    </ul>
                </div>
                <div class="smallpicturepart">
                    <img class="smallpicture left" id="applescreen1" src="./images/康比特p.png" alt="康比特小图">
                    <ul>
                        <li class="miaoshu left" >康比特 维他保咀嚼片 60片</li>
                        <li class="jine left">￥100.00</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
    <div class="footer1">
            <div class="联系我们">
                <a >猿代码简介 猿代码公告 招纳贤士 联系我们 客服热线：400-700-1307</a>
            </div>
           <div class="备案">
               <a >Copyright © 2006 - 2016 猿代码版权所有   沪ICP备09037834号   沪ICP证B1034-8373号   上海市市公安局宝山分局备案编号：123456789123</a>
           </div>
            <div class="底部认证">
                <span >
                    <img class=" action " src="./images/authentication.png" alt="认证">
                    <img class=" action " src="./images/authentication.png" alt="认证">
                    <img class=" action " src="./images/authentication.png" alt="认证">
                    <img class=" action " src="./images/authentication.png" alt="认证">
                </span>
            </div>
    </div>
    </div>
</body>
</html>